<template>
    <div class="container">
        <div class="carnumber">
            <div>进场车牌号识别</div>
            <el-upload class="upload-demo" drag action="" :http-request="handleupload">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过1MB</div>
            </el-upload>
            <div class="int">车牌照
                <img :src="imgSrc" alt="识别的车牌" v-if="imgSrc" class="img">
            </div>
        </div>
        <div class="show">
            <div>进场车牌号:{{ carnumber }}</div>
            <div style="margin-top: 20px;">进场时间:{{ startTime }}</div>
            <div style="margin-top: 20px;">空余车位：{{ nocar }}</div>
        </div>
        <div class="money">
            收费牌
            <el-card class="box-card">
                {{ rules }}
            </el-card>

        </div>




    </div>
</template>

<script>
import { uploadIdNumberImg } from "@/api/parkingcar/number.js"
import { Rules } from "@/api/parkingcar/rules.js"
import { addOrderByCar, carOrder } from "@/api/parkingcar/order.js"
import { addCar, allCar } from "@/api/parkingcar/car.js"
import { CarEsmap } from "@/api/parkingcar/esmap";

export default {
    data() {
        return {
            rules: null,
            carnumber: null,
            imgSrc: null,
            startTime: null,
            endTime: null,
            carId: null,
            nocar: null,

        }
    },

    mounted() {
        CarEsmap().then(res => {
                this.nocar = res.data
            })
        
    },
    methods: {

        handleupload(file) {

            const formData = new FormData();
            formData.append('imgFile', file.file);
            uploadIdNumberImg(formData).then(res => {
                this.carnumber = res.data.Number;
                this.$modal.msgSuccess("识别成功");
                // 创建一个可以在浏览器中显示的 URL
                this.imgSrc = URL.createObjectURL(file.file);
                const currentTime = new Date().toLocaleString();

                const data = {
                    licensePlate: this.carnumber
                }

                carOrder(data).then(res => {   //根据车牌查询订单状态
                    
                    if (res.data != null) {   //存在订单未结清，跑单狗
                        alert("存在未结清订单，结清后进场")
                        
                    } else {    //无未结清订单，或者无历史订单
                        this.startTime = currentTime;
                                               
                        allCar(data).then(res => {   //根据车牌查询检查车辆表是否存在该车辆信息

                            if (res.data != null) {    //返回车辆信息，生成订单                              
                                addOrderByCar({ carId: res.data.carId, type: 'star', startTime: this.startTime });
                            } else {
                                //不存在车辆信息，新增后生成订单
                                alert("请先注册账号绑定车辆才能进场")
                               
                                addCar(data).then(res => {
                                    console.log(res,5555555)
                                    addOrderByCar({ carId: res.data.carId, type: 'star', startTime: this.startTime });
                                })
                                
                                // addOrderByCar({ carId: res.data.carId, type: 'star', startTime: this.startTime });

                            }
                        })


                    }

                });

            }).catch(error => {
                console.error("上传失败：", error);
                this.$modal.msgError("上传失败");
            });
           
        },
        handleSuccess(response, file) {
            // 处理上传成功的逻辑
            console.log('Upload success:', file);
        },

        fetchRules() {
            Rules().then(response => {
                this.rules = response.data.node;
            });
        },

    },
    created() {
        this.fetchRules();
    },
}
</script>

<style>
.container {
    display: flex;
    margin-top: 100px;
    margin-left: 100px;
}

.carnumber {
    float: left;
    width: 350px;
    height: 200px;
    margin-right: 10px;
    /* 与右侧元素的距离 */
}

.money {
    width: 400px;
    /* 与卡片宽度一致 */
    float: left;
    margin-left: 300px;
}

.box-card {
    width: 100%;
}

.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.show {
    float: left;
    width: 180px;
    margin-top: 20px;
    margin-left: 10px;
}

.int {
    float: left;
    margin-top: 20px;
    margin-top: 50px;


}

.img {
    width: 300px;
    height: 150px;
    margin-top: 10px;

}
</style>
